<template>
  <canvas :width="width" :height="height" :fontSize="fontSize" ref="qrcode"></canvas>
</template>
  
  <script>
  import QRCode from 'qrcode';
  
  export default {
    name: 'QRCodeGenerator',
    props: {
      width: {
        type: Number,
        default: 20
      },
      height: {
        type: Number,
        default: 20
      },
      fontSize: {
        type: Number,
        default: 10
      },
      content: {
        type: String,
        required: true
      }
    },
    watch: {
      content: {
        immediate: true,
        handler(val) {
          if (val) {
            this.generateQRCode()
          }
        }
      }
    },
    mounted() {
      this.generateQRCode()
    },
    methods: {
      generateQRCode() {
        const canvas = this.$refs.qrcode;
        const ctx = canvas.getContext('2d');
  
        // Set canvas size
        canvas.width = this.width;
        canvas.height = this.height;
  
        // Generate QR Code
        QRCode.toDataURL(this.content, {
          margin: 1,
          width: this.width,
          height: this.height,
          errorCorrectionLevel: 'H'
        }).then((url) => {
          // Draw QR Code on canvas
          const img = new Image();
          img.src = url;
          img.onload = () => {
            ctx.drawImage(img, 0, 0, this.width, this.height);
  
            // Add text below QR Code
            ctx.fillStyle = '#000000';
            ctx.font = `16px ${this.font}`;
            ctx.textAlign = 'center';
            ctx.fillText(this.content, this.width / 2, this.height + 20);
          };
        });
      }
    }
  };
  </script>
